import React, { Component } from 'react';
import './App.css';

import Header from './Header'
import ToDoList from './ToDoList'
import Footer from './Footer'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [
        {
          status: true,
          content: '吃饭'
        },
        {
          status: false,
          content: '洗碗'
        }
      ],
      filter: 'all'
    }
  }
  
  handleSubmit = (value) => {
    this.setState({
      list: [
        ...this.state.list,
        {
          content: value,
          status: false
        }
      ]
    })
  }

  handleCheck = (e) => {
    console.log(e.target.value);
    
    this.setState({
      filter: e.target.value
    })
  }


  handleItemClick = (target) => {
    let list = JSON.parse(JSON.stringify(this.state.list))
    let temp = list.find(item => item.content == target.content)
    temp.status = true
    this.setState({
      list
    })
  }
  
  render() {
    return (
      <div className="App">
        <h1>React To Do</h1>
        <Header handleSubmit={this.handleSubmit}></Header>
        <ToDoList list={this.state.list} handleItemClick={this.handleItemClick} filter={this.state.filter}/>
        <Footer filter={this.state.filter} handleCheck={this.handleCheck}></Footer>
      </div>
    );
  }
}

export default App;
